<!--法律服务-->
<template>
  <div class="robot-tab-cont search-back">
    <div class="windows_body3"><!--为了抵抗happy-scroll自动设置高宽-->
      <happy-scroll
          color="rgba(0,0,0,0.2)"
          size="10"
          :resize="true"
          smaller-move-v1="start"
          bigger-move-h1="end"
          :min-length-h="20"
          hide-horizontal>
        <ul class="newsList">
          <li>
            <div class="answerHead">
              <img src="../../assets/images/robot.png">
              <p>{{ robot.robotName }}</p>
            </div>
            <div class="answers">
              <i class="triangle"></i>
              <div class="answers-text answers-text2 scroll_wrap" style="width: 800px">
                <div class="answers-text-cont scroll_cont">
                  <a href="javascript:void(0)" class="answers-cont-banner">
                    <img src="../../assets/images/banner02.png"/>
                  </a>
                  <template v-for="(subServeList,key,index) in serveMap">
                    <div class="list-item clearfix">
                      <h1><span></span>{{ key }}</h1>
                      <div class="answers-text-cont-list">
                        <a v-for="serve in subServeList"
                           @click="changeMatters(serve.matters,index)" href="javascript:void(0)"
                           :class="[{'active':currentMatters === serve.matters}]">{{ serve.matters }}</a>
                      </div>
                    </div>
                    <template v-for="serve in subServeList">
                      <div class="list-item-cont1" v-show="currentMatters === serve.matters">
                        <div class="cont-text">
                          <span><strong>事项名称：</strong></span>
                          <strong>{{ serve.matters }}</strong>
                          <empty v-if="serve.url !== undefined && serve.url.indexOf('http') === 0">
                            <a :href="serve.url" class="fr" target="_blank">
                              <img src="../../assets/images/icon05.png"/>点击进入
                            </a>
                          </empty>
                          <empty v-else-if="serve.url !== undefined && JSON.parse(serve.url) instanceof Array">
                            <template v-for="u in JSON.parse(serve.url)">
                              <a :href="u.url" class="fr" target="_blank">
                                <img src="../../assets/images/icon05.png"/>{{ u.name }}
                              </a>
                            </template>
                          </empty>
                        </div>
                        <div class="cont-text">
                          <span><strong>工作承诺：</strong></span>
                          <p style="margin-left: 0" v-html="serve.promise"></p>
                        </div>
                        <div class="cont-text">
                          <span><strong>服务流程：</strong></span>
                          <p style="margin-left: 0" v-html="serve.matterProcess"></p>
                        </div>
                        <div class="cont-text">
                          <span><strong>服务对象：</strong></span>
                          <p v-html="serve.object"></p>
                        </div>
                        <div class="cont-text">
                          <span><strong>时限要求：</strong></span>
                          <p v-html="serve.timeLimit"></p>
                        </div>
                        <div class="cont-text">
                          <span><strong>责&nbsp;&nbsp;任&nbsp;&nbsp;人：</strong></span>
                          <p v-html="serve.responsible"></p>
                        </div>
                      </div>
                    </template>
                  </template>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </happy-scroll>
    </div>
  </div>
</template>
<script>
import API from "components/api-chat-window";

export default {
  props: {
    robot: {
      type: Object,
      default: {
        robotName: null
      }
    }
  },
  data() {
    return {
      serveMap: {},
      currentMatters: ""
    }
  },
  created() {
    API.getLegalServe({}).then(res => {
      if (res.data) {
        this.serveMap = res.data;
      }
    })
  },
  methods: {
    changeMatters(matters, index) {
      if (this.currentMatters === matters) {
        this.currentMatters = "";
      } else {
        this.currentMatters = matters;
        //此处不能立即获取高度，因为有数据展开折叠了，获取的会是过期的
        setTimeout(() => {
          let stop = document.getElementsByClassName("happy-scroll-container")[2];
          let height = document.getElementsByClassName("active")[2].offsetTop - 25;
          if (index === 0 && stop.scrollTop < height) {
            return;
          }
          stop.scrollTop = height;
        }, 300);
      }
    }
  },
  mounted() {
    window.serve = this;
  }
}
</script>